<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>测试02</title>
    <script src="../../static/js/jquery-2.1.4min.js"></script>
    <script src="../../static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="../../static/js/index.js"></script>
    <link type="text/css" rel="stylesheet" href="../../static/index.css?version=1.0">
    <link href="../../static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- 固定式头部-->
<!--<div class="top">-->

<nav class="navbar navbar-default navbar-fixed-top header" role="navigation">
    <div class="container-fluid">

        <div class="navbar-header">
            <a class="navbar-brand" href="#">XXX书店</a>
        </div>

        <ul class="nav navbar-default navbar-toggle">
            test
        </ul>

        <form class="navbar-form navbar-left" role="search" id="center">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="搜索" id="search_input">
            </div>

            <div class="btn-group">
                <button type="button" class="btn btn-default" id="search">按书名搜索</button>
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" id="dropdown-menu" id="dropdown-menu">
                    <li><a id="change">按作者搜索</a></li>
                </ul>
            </div>
        </form>

        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
        </ul>
    </div>
</nav>

<!--</div>-->
<!-- 主要内容-->
<div class="main">

    <div class="left">这是Left!</div>

    <div class="content">

        <div class="row">

            <div class="col-md-2 card">
                <a href="#" class="thumbnail">
                    <img src="../../static/img/default_book_img.jpg"
                         alt="通用的占位符缩略图">
                </a>
                <div class="caption">
                    <h3>书名</h3>
                    <p>作者</p>
                    <p><a>价格：50</a> <a>已经有50人购买</a> </p>
                </div>
            </div>


        这是Content!
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <ul class="pagination pagination-lg" style="">
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
        <br><br>
        这是多行高度！
        <br>
    </div>

    <div class="right">这是Right!</div>

</div>
<!--底部-->
<div class="foot">
    <footer>
        <p>Luyishi.Copyright &copy;2020</p>
    </footer>
</div>
</body>
</html>